<template>
  <div>
    <el-row :gutter="0">
      <el-carousel :interval="0" arrow="never" height="500px" type="card">
        <el-carousel-item v-for="(item,index) in dataimg" :key="index">
          <div class="grid-content">
            <el-col :md="12" :offset="6">
              <div>
                <img :src="item.src">
              </div>
            </el-col>
          </div>
        </el-carousel-item>
      </el-carousel>
    </el-row>
    <div style="margin-top:50px">
      <el-form label-width="200px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单号">
              <el-input v-model="dataForm.orderNo" :disabled="true" placeholder="订单号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="退税方式">
              <el-input
                v-if="dataForm.transferType==1"
                value="银行卡"
                :disabled="true"
                placeholder="退税方式"
              ></el-input>
              <el-input
                v-if="dataForm.transferType==2"
                value="支付宝"
                :disabled="true"
                placeholder="退税方式"
              ></el-input>
              <el-input
                v-if="dataForm.transferType==3"
                value="微信"
                :disabled="true"
                placeholder="退税方式"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="账号">
              <el-input v-model="dataForm.accountNo" :disabled="true" placeholder="账号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名">
              <el-input v-model="dataForm.realName" :disabled="true" placeholder="姓名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="电话">
              <el-input v-model="dataForm.phone" :disabled="true" placeholder="电话"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开户行">
              <el-input v-model="dataForm.bankName" :disabled="true" placeholder="开户行"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="退税金额" required>
              <el-input v-model="dataForm.taxPrice" placeholder="退税金额"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="税点" required>
              <el-input v-model="dataForm.taxPoint" placeholder="税点"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="审核未通过原因">
            <el-input v-model="dataForm.reason" type="textarea" :rows="3" placeholder="审核未通过原因"></el-input>
          </el-form-item>
        </el-row>
        <el-form-item center="true">
          <el-button type="success" @click="onCheckOk(1)" align="center">通过</el-button>
          <el-button type="danger" @click="onCheckOk(2)">不通过</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      dataForm: {
        reason: "",
        taxPrice: "",
        taxPoint: ""
      },
      dataimg: []
    };
  },
  computed: {
    documentClientHeight: {
      get() {
        return this.$store.state.common.documentClientHeight;
      }
    },
    menuActiveName: {
      get() {
        return this.$store.state.common.menuActiveName;
      },
      set(val) {
        this.$store.commit("common/updateMenuActiveName", val);
      }
    },
    mainTabs: {
      get() {
        return this.$store.state.common.mainTabs;
      },
      set(val) {
        this.$store.commit("common/updateMainTabs", val);
      }
    },
    mainTabsActiveName: {
      get() {
        return this.$store.state.common.mainTabsActiveName;
      },
      set(val) {
        this.$store.commit("common/updateMainTabsActiveName", val);
      }
    },
    siteContentViewHeight() {
      var height = this.documentClientHeight - 50 - 30 - 2;
      if (this.$route.meta.isTab) {
        height -= 40;
        return isURL(this.$route.meta.iframeUrl)
          ? { height: height + "px" }
          : { minHeight: height + "px" };
      }
      return { minHeight: height + "px" };
    }
  },
  mounted() {
    this.id = this.$route.query.id.toString();
    this.init(this.id);
  },
  methods: {
    // tabs, 删除tab
    removeTabHandle(tabName) {
      this.mainTabs = this.mainTabs.filter(item => item.name !== tabName);
      if (this.mainTabs.length >= 1) {
        // 当前选中tab被删除
        if (tabName === this.mainTabsActiveName) {
          this.$router.push(
            { name: this.mainTabs[this.mainTabs.length - 1].name },
            () => {
              this.mainTabsActiveName = this.$route.name;
            }
          );
        }
      } else {
        this.menuActiveName = "";
        this.$router.push({ name: "home" });
      }
    },
    tabsCloseCurrentHandle() {
      this.removeTabHandle(this.mainTabsActiveName);
    },
    init(id) {
      this.$http({
        url: this.$http.adornUrl(`/biz/drawbackRecord/info/${id}`),
        method: "post",
        data: this.$http.adornParams()
      }).then(({ data }) => {
        if (data) {
          this.dataForm = data.drawbackRecord;
          this.dataimg = data.drawbackRecord.images;
        }
      });
    },
    onCheckOk(states) {
      var reason = this.dataForm.reason;
      if (states == 2 && reason == "") {
        this.$message({
          showClose: true,
          message: "请说明审核不通过的具体原因",
          type: "error"
        });
        return;
      }
      this.$confirm(`确定当前操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl(`/biz/drawbackRecord/pass/`),
          method: "post",
          data: this.$http.adornParams({
            'currenttId': this.id,
            'states': states,
            'taxPrice': this.dataForm.taxPrice,
            'taxPoint': this.dataForm.taxPoint,
            'reason': this.dataForm.reason
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.tabsCloseCurrentHandle();
                this.$router.push({ path: "/biz-drawbackRecord"});
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    }
  }
};
</script>
